<template>
  <div class style="width: 600px;">
    <ts-screen-date @refreshData="refreshData" ></ts-screen-date>
    <ts-title-panel style="width:500px;height:400px;margin-bottom:30px"></ts-title-panel>
    <ts-input
      v-model="keywords"
      title
      placeholder="请输入关键字"
      width="100%"
      suffix-icon="iconfont icon-Group-14"
    ></ts-input>
    <!-- <ts-tree
      :source="treeObj"
      width="100%"
      height="100%"
      row-id="id"
      :is-border="false"
      :expandAll="false"
      :search-words="keywords"
      ref="sysManageSystemRolemgtLimitsTree"
    ></ts-tree>-->
    <ts-button @click="saveTree">保存</ts-button>
    <div style="height:200px;width:600px">
      <ts-g2-chart
        :chartType="19"
        :data="[{ value: 8.6,category:'上线率上线率',column:'dddd'},{ value: 100,category:'哈哈哈',column:'dddd'},{ value: 100,category:'哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉哈哈肉肉肉',column:'dddd'}]"
        height="200"
        :showPercent="true"
      ></ts-g2-chart>
    </div>
    <ts-date v-model="treejsonsel" type="range" width="300px"></ts-date>
    <tsButton @click="onBtn">点我测试弹框</tsButton>
    <tsPopover>注：返回结果后的数据量约束</tsPopover>数据量
    <div style="width:250px">
      <ts-select v-model="treejsonsel" title="所属指标" :emphasize="true" :source="targetSource" />
    </div>
    <!-- <ts-multi-mdl :mulitValue="clickEvent" :fields="clickField" title="单击" width="100%"></ts-multi-mdl> -->
    <!-- <ts-date v-model="dateVal" title="日期" type="range" placeholder="" width="100%" @done="dateBack"></ts-date>
    <ts-date v-model="rangetime" title="日期" type="rangetime" placeholder="" width="100%" @done="dateBack"></ts-date>
    <ts-date v-model="dateVal" title="日期" type="date" placeholder="" width="100%" @done="dateBack"></ts-date>
    <ts-date v-model="timeVal" title="日期" type="datetime" placeholder="" width="100%" @done="dateBack"></ts-date>-->
    <ts-input title="输入框" placeholder="请输入" width="100%"></ts-input>
    <!-- <ts-radio title="单选" :data="sysType" width="100%" @change="select"></ts-radio>
    <ts-radio v-model="radioVal" title="单选" :data="sysType" width="100%" @change="radioselect"></ts-radio>
    <ts-radio v-model="radioVal" title="单选组" :data="sysType" type="group" @change="select" width="100%"></ts-radio>-->
    <!-- <ts-switch title="是否开启" on-label="是" off-label="否" width="100%" v-model="istrue" @change="switchfn"></ts-switch>
    <ts-switch title="是否开启" on-label="是" off-label="否" width="100%" :disabled="true" @change="switchfn"></ts-switch>
    <ts-switch title="是否开启" on-label="是" off-label="否" :on-value="1" :off-value="2" v-model="switchs" key="switch0" @change="switchfn"></ts-switch>
    <ts-switch title="是否开启" on-label="是" off-label="否" :on-value="1" :off-value="3" v-model="switchs" :disabled="true" key="switch1" @change="switchfn"></ts-switch>-->

    <!-- <ts-select
      :source="ssoMethods"
      v-model="sels"
      title="localSearch"
      placeholder
      width="100%"
      @selected="selectSearch"
    ></ts-select>-->
    <!-- <ts-select
      :source="ssoMethodss"
      v-model="selss"
      title="localSearch"
      placeholder
      width="100%"
      key="sel1"
    ></ts-select>-->
    <!-- <ts-select
      :source="ssoMethod"
      v-model="sel"
      title="local"
      placeholder
      width="100%"
      @selected="select"
      key="sel2"
      v-if="cutS == 2"
    ></ts-select>-->
    <!-- 
    <ts-select
      :source="json"
      v-model="jsonsel"
      title="单选"
      placeholder
      width="100%"
      @change="selectJson"
    ></ts-select>-->
    <!-- <ts-select
      :source="json_s"
      v-model="jsonsel_s"
      title="单选req"
      placeholder
      width="100%"
      @selected="selectJson"
    ></ts-select>-->
    <!-- <ts-select
      :source="jsonm"
      v-model="jsonselm"
      title="多选"
      placeholder
      width="100%"
      @change="selectJsons"
    ></ts-select>-->
    <!-- <ts-select
      :source="treejson"
      v-model="treejsonsel"
      title="树"
      placeholder
      width="100%"
      @change="select"
    ></ts-select>-->
    <ts-date v-model="treejsonsel" type="range" width="300px"></ts-date>

    <!-- <ts-textarea title="文本域" placeholder="请输入" width="100%"></ts-textarea> -->
    <!-- <ts-multi-mdl :mulitValue="multiArr" title="业务模块" width="100%" type="text" @change="multi"></ts-multi-mdl> -->
    <div style="width: 600px; height: 400px;">
      <!-- <ts-g2-chart title="图表" :chartType="1" :data="chartData"></ts-g2-chart> -->
    </div>
  </div>
</template>

<script>
// import tsG2Chart from '@/components/tsG2Chart.vue'
import topBarItemJSON from './topBarItem.json'
export default {
  name: 'testform',
  components: {},
  data: function() {
    return {
      topBarItemJSON: topBarItemJSON,
      istrue: true,
      rangetime: '',
      checkboxVal: 'name1:1;name4:4',
      switchs: 1,
      multiArr: [{ value: '1' }, { value: '2' }],
      radioVal: 2,
      sysType: [
        { name: 'name1', value: 1, text: '启用' },
        { name: 'name2', value: 2, text: '禁用' },
        { name: 'name3', value: 3, text: '只读' },
        { name: 'name4', value: 4, text: '删除' }
      ],
      keywords: '', // 树检索参数
      clickField: [
        {
          name: 'sourceParam',
          type: 'select',
          id: 'sourceParam',
          width: '100%',
          placeholder: '源参数',
          source: {
            dataType: 'local',
            data: [
              { value: 1, label: 'Ajax' },
              { value: 2, label: 'Web' }
            ],
            code: 'value',
            text: 'label',
            value: {
              code: 1,
              name: 'Ajax'
            }
          },
          isGanged: true, // 是否联动
          gangedId: 'targetParam', // 联动项id
          formatter: row => {
            return row.label
          }
        },
        {
          name: 'targetParam',
          type: 'text',
          id: 'targetParam',
          width: '100%',
          placeholder: '目标参数',
          tsPopover: '跳转需要携带的字段名',
        }
        // {
        //   name: 'targetParam',
        //   type: 'select',
        //   id: 'targetParam',
        //   width: '50%',
        //   placeholder: '目标参数',
        //   source: {
        //     dataType: 'local',
        //     data: [],
        //     code: 'name',
        //     text: 'name',
        //     value: {
        //       name: '',
        //       code: ''
        //     }
        //   }
        // }
      ],
      targetSource: {
        dataType: 'local',
        method: 'get',
        code: 'code',
        text: 'name',
        data: [],
        grid: true,
        gridLiWidth: '50%',
        choice: true,
        isReq: false,
        value: {
          code: '',
          name: ''
        }
      },
      sel: '',
      ssoMethod: {
        dataType: 'local',
        data: [
          { value: 1, label: 'Ajax' },
          { value: 2, label: 'Web' }
        ],
        code: 'value',
        text: 'label',
        value: {
          code: 1,
          name: 'Ajax'
        }
      },
      sels: 1,
      ssoMethods: {
        dataType: 'local',
        data: [
          { value: 1, label: 'Ajax1' },
          { value: 2, label: 'Web1' }
        ],
        isReq: true,
        code: 'value',
        text: 'label',
        value: {
          code: 1,
          name: 'Ajax'
        }
      },
      selss: 1,
      ssoMethodss: {
        dataType: 'local',
        data: [
          { value: 1, label: 'Ajax2' },
          { value: 2, label: 'Web2' }
        ],
        code: 'value',
        text: 'label',
        value: {
          code: '',
          name: ''
        }
      },
      // 下拉树
      treejsonsel: '',
      treejson: {
        dataType: 'json',
        url: '/ts-system/api/role/tree',
        method: 'get',
        data: {},
        code: 'code',
        text: 'name',
        children: 'children',
        tree: true
      },
      // 单选基础配置
      jsonsel: '',
      json: {
        dataType: 'json',
        url: '/ts-portal/api/portal/elment/getElementsByName',
        method: 'get',
        data: {
          sidx: 'create_date',
          sord: 'desc',
          // pageSize: 20,
          pageNo: 1
        },
        page: 'pageNo',
        code: 'elementid',
        text: 'elementname',
        value: {
          name: '',
          code: ''
        }
      },
      // 单选基础配置
      jsonsel_s: '5d6ce9d1d38e544e3cd46dec',
      json_s: {
        dataType: 'json',
        url: '/ts-portal/api/portal/elment/getElementsByName',
        method: 'get',
        data: {
          sidx: 'create_date',
          sord: 'desc',
          // pageSize: 20,
          pageNo: 1
        },
        page: 'pageNo',
        code: 'elementid',
        text: 'elementname',
        condition: 'condition',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      // 多选基础配置
      jsonselm: '5fc0c79fa31d8246c62f1a48,5d6e0afcd38e54129d76514e',
      jsonm: {
        dataType: 'json',
        url: '/ts-portal/api/portal/elment/getElementsByName',
        method: 'get',
        // data: [
        //   { name: 'name1', value: 1, text: '启用' },
        //   { name: 'name2', value: 2, text: '禁用' },
        //   { name: 'name3', value: 3, text: '只读' },
        //   { name: 'name4', value: 4, text: '删除' }
        // ],
        page: 'pageNo',
        code: 'elementid',
        text: 'elementname',
        choice: true,
        isReq: true,
        value: {
          name: 'a,b',
          code: '1,2'
        }
      },
      timeVal: '2020-07-28 10:20:30',
      dateVal: '2020-07-28 ~ 2020-08-04',
      dateObj: {},
      ssodata: {},
      // 图表数据
      chartData: [
        { column: 'London', category: 'Jan.', value: 18.9 },
        { column: 'London', category: 'Feb.', value: 28.8 },
        { column: 'London', category: 'Mar.', value: 39.3 },
        { column: 'London', category: 'Apr.', value: 81.4 },
        { column: 'London', category: 'May', value: 47 },
        { column: 'London', category: 'Jun.', value: 20.3 },
        { column: 'London', category: 'Jul.', value: 24 },
        { column: 'London', category: 'Aug.', value: 35.6 },
        { column: 'Berlin', category: 'Jan.', value: 12.4 },
        { column: 'Berlin', category: 'Feb.', value: 23.2 },
        { column: 'Berlin', category: 'Mar.', value: 34.5 },
        { column: 'Berlin', category: 'Apr.', value: 99.7 },
        { column: 'Berlin', category: 'May', value: 52.6 },
        { column: 'Berlin', category: 'Jun.', value: 35.5 },
        { column: 'Berlin', category: 'Jul.', value: 37.4 },
        { column: 'Berlin', category: 'Aug.', value: 42.4 }
      ],
      cutS: 1
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      this.checkboxVal = 'name1:1;name4:4;name2:2'
    }, 3000)
    this.nameChangeEvent({
      column: 123
    })
    new Promise(() => {
      console.log('33333')
    })
  },
  methods: {
    refreshData(){
      console.log('刷新----')
    },
    onBtn() {
      this.$mModal.confirm('您确定退出登录吗？').then(type => {
        
        if (type === 'confirm') {
          console.log('33333')
        }
      })
    },
    radioselect(v, o) {},
    nameChangeEvent({ column, row }) {},
    selectSearch(o) {
      this.cutS = o.value
      this.ssoMethodss.value = {
        name: o.label,
        code: o.value
      }
    },
    select(o, _o) {
      this.json.value.name = o.label
      this.json.value.code = o.value
    },
    selectJson(o, r) {
      this.jsonm.data.elementid = o.code
    },
    selectJsons(o) {
      // this.jsonsel = ''
    },
    // 图片成功回调
    iconSuccess(o, src) {
      this.ssodata.file = o[0]
    },
    multi(o) {},
    checkedchange(o) {},
    // 日期
    dateBack(o) {},
    //
    switchfn(v) {},
    async saveTree() {
      let arr_
      await this.$refs.sysManageSystemRolemgtLimitsTree
        .getCheckboxRecords()
        .then(arr => {
          arr_ = arr
          console.log('已选中的值', arr)
        })
      console.log(arr_)
    }
  }
}
</script>
<style scoped>
</style>
